<template>
  <view class="certificate-appraisal">
    <view class="certificate-content">
      <view class="content-title">鉴定报告</view>
      <view class="title-label">专业鉴定 快速准确</view>
      <view class="certificate-result">
        <image src="@/static/home/image/truth.png" mode="" class="result-img" v-show="listData.label ==1"></image>
        <image src="@/static/home/image/fake.png" mode="" class="result-img" v-show="listData.label ==-1"></image>
        <image src="@/static/home/image/question.png" mode="" class="result-img" v-show="listData.label ==2"></image>
        <view class="result-title">鉴定{{resultActive}}</view>
        <view class="result-label">鉴定结果根据用户提供的图片得出</view>
      </view>
      <view class="certificate-info">
        <view class="info-title">鉴定类型</view>
        <view class="info-nav">{{listData.category?listData.category.name:''}}</view>
      </view>
      <view class="certificate-info">
        <view class="info-title">鉴定ID</view>
        <view class="info-nav">{{listData.no}}</view>
      </view>
      <view class="certificate-info">
        <view class="info-title">鉴定时间</view>
        <view class="info-nav">{{listData.decide_time}}</view>
      </view>
      <view class="certificate-info">
        <view class="info-title">判定依据</view>
        <view class="info-nav">{{listData.desc}}</view>
      </view>
      <view class="certificate-label"></view>
      <view class="certificate-nav">
        <view class="list-img" v-show="listData.vedio" @click="onAmplifyImg(listData.vedio,'video')">
          <DomVideoPlayer ref="domVideoPlayer" :src="listData.vedio" muted class="info-video" />
          <image src="@/static/home/icon/play.png" mode="aspectFill" class="vedio-icon"></image>
        </view>
        <view class="list-img" v-for="item,index in listData.task_image" :key="index"
          @click="onAmplifyImg(item.image,'image')">
          <up-image :src="item.image" radius="16rpx" width="144rpx" height="144rpx" mode="aspectFit"
            :lazy-load="true"></up-image>
        </view>
      </view>
      <view class="certificate-describe">鉴定说明：由于藏品的特殊性和图文鉴别的局限性，鉴定结果仅供参考，不作为任何交易争议依据，不具备法律效力。</view>
      <view class="certificate-footer">
        <image src="@/static/logo.png" mode="" class="footer-img"></image>
        <view class="footer-name">专业文玩鉴宝平台</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    taskIndex
  } from './api.js'
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer';
  const id = ref()
  const listData = ref({})
  const resultActive = ref('')
  const show = ref(false)

  onLoad((e) => {
    if (e && e.id) {
      id.value = e.id
      taskIndexAPi(e.id)
    }
  })

  function onAmplifyImg(url, type) {
    uni.navigateTo({
      url: `/pages/index/fullScreenPreview/FullScreenPreview?type=${type}&src=${url}`
    })
  }

  const taskIndexAPi = (async (id) => {
    const res = await taskIndex({
      no: id
    })
    if (res && res.code === 1) {
      listData.value = res.data
      resultActive.value = res.data.label == 1 ? '为真' : res.data.label == -1 ? '为假' : '存疑'
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
</script>

<style lang="scss" scoped>
  .certificate-appraisal {
    // height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 12rpx;
    background: linear-gradient(180deg, #F2D29B 0%, #FFFFFF 100%);

    .certificate-content {
      height: 100%;
      width: 100%;
      background-color: #fff;
      // background-image: url('@/static/home/image/certificateBackground.png');
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      border: 60rpx solid #fff;
      border-image: url('@/static/home/image/certificateBackground.png') 50 round;

      .content-title {
        font-size: 36rpx;
        font-weight: 400;
        color: #333;
        text-align: center;
      }

      .title-label {
        font-size: 26rpx;
        font-weight: 400;
        color: #666;
        text-align: center;
      }

      .certificate-result {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-top: 50rpx;
        align-items: center;
        position: relative;

        .result-img {
          position: absolute;
          height: 160rpx;
          width: 160rpx;
          top: -18rpx;
          right: 10rpx;
        }

        .result-title {
          font-size: 68rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-bottom: 8rpx;
          z-index: 1;
        }

        .result-label {
          z-index: 1;
        }
      }

      .certificate-info {
        display: flex;
        margin-top: 30rpx;
        font-size: 28rpx;
        font-weight: 400;

        .info-title {
          width: 25%;
          color: rgba(153, 153, 153, 1);
          flex: 0 0 auto;
        }

        .info-nav {
          color: rgba(51, 51, 51, 1);

        }
      }

      .certificate-label {
        margin-top: 48rpx;
        width: 100%;
        height: 4rpx;
        background: linear-gradient(to right, transparent 0%, #A05724 30%, #A05724 70%, transparent 100%);
      }

      .certificate-nav {
        margin-top: 48rpx;
        display: flex;
        overflow: scroll;

        .list-img {
          width: 144rpx;
          height: 144rpx;
          border-radius: 16rpx;
          flex: 0 0 auto;
          margin-right: 16rpx;
          border: 2rpx solid rgba(235, 235, 235, 1);
          position: relative;

          .vedio-icon {
            height: 48rpx;
            width: 48rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

      }

      .certificate-describe {
        margin-top: 32rpx;
        width: 100%;
        height: 64rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);

      }

      .certificate-footer {
        display: flex;
        margin-top: 32rpx;
        justify-content: center;
        align-items: center;

        .footer-img {
          width: 64rpx;
          height: 64rpx;
          border-radius: 8rpx;

        }

        .footer-name {
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-left: 16rpx;
        }
      }
    }

  }
</style>